<template>
  <view class="flex-1 px-5">
		<view
		  class="px-5 flex flex-col flex-1"
		  v-if="settingInfo.switchSale == 1"
		>
			<view class="my-5">
				<view
					class="w-full h-[360rpx] rounded-lg relative overflow-hidden mb-3 air"
					v-for="(item, index) in list"
					:key="index"
					:style="{ backgroundImage: 'url(' + item.img + ') ' }"
				>
					<view
						class="absolute bottom-0 left-0 w-full flex items-center justify-between bgg px-[30rpx]"
					>
						<view class="flex items-center">
							<image src="@/static/hot-air.png" class="w-5 h-5"></image>
							<view class="font-medium text-base ml-2 text-white">{{
								item.name
							}}</view>
						</view>
						<view class="flex items-center" @click="go(item.id)">
							<view class="text-white text-xs pr-1">详细信息</view>
							<image src="@/static/right.png" class="w-[28rpx] h-[28rpx]"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else class="w-full flex-1 h-full flex flex-col bg-white">
		  <image
		    class="w-full"
		    mode="widthFix"
		    src="https://ykx-1254116920.cos.ap-nanjing.myqcloud.com/aircraft/222.jpg"
		  ></image>
		</view>
  </view>
</template>

<script setup lang="ts">
import { getSalePlanes_api } from "@/api/index";
import { ref, reactive, computed } from "vue";
import { onShareAppMessage } from "@dcloudio/uni-app";
import { useUserStore } from "@/stores/user.js";
const userStore = useUserStore();
const settingInfo = computed(() => userStore.setting);

const list = ref([]);
const getList = () => {
  getSalePlanes_api().then((res) => {
    list.value = res;
  });
};
getList();
const go = (id) => {
  uni.navigateTo({
    url: "/pages/index/saleAirInfo?id=" + id,
  });
};

onShareAppMessage(() => {
  return {
    title: "私人飞机买卖、包机、咨询，专业团队为您提供全流程服务",
    path: `/pages/index/hotAir`,
    imageUrl: settingInfo.value.shareImg,
  };
});
</script>

<style lang="scss" scoped>
.bgg {
  height: 80rpx;
  background: linear-gradient(90deg, #000000 0%, rgba(0, 0, 0, 0) 100%);
  opacity: 0.7;
}
.air {
  background-size: 100% 100%;
}
</style>
